<template>
  <div style="font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;">
    <el-row :gutter="50" style="height: 170px">
      <el-col :span="3">
        <div style="width: 100%;height: 100px;margin-top: 20px">
          <input type="checkbox" :checked="switchStatus" class="toggle" @change="setSwitch">
          <div class="switch" />
        </div>
      </el-col>
      <el-col :span="21" style="padding-left: 100px;padding-top: 20px">
        <el-button-group style="margin-bottom: 30px;margin-left: 13px">
          <el-button type="danger" icon="el-icon-refresh" @click="setReboot">重启</el-button>
          <el-button type="primary" icon="el-icon-time" @click="openStrategy">策略</el-button>
          <el-button type="primary" icon="el-icon-time" @click="getData">同步数据</el-button>
        </el-button-group>
        <span style="line-height: 50px;font-size: 55px;margin-left: 5px">{{ brightness }}%</span>
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" icon="el-icon-minus" circle @click="brightness-=5" />
          </el-form-item>
          <el-form-item>
            <el-slider
              v-model="brightness"
              style="width: 300px"
              :marks="marks"
              @change="setBrightness"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus" circle @click="brightness+=5" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-dialog :title="$t('strategy')" :visible.sync="showStrategy" width="1300px" :close-on-click-modal="false">
      <device-strategy v-if="showStrategy" :device-strategy="deviceStrategy" @change="init" />
    </el-dialog>
  </div>
</template>

<script>

import {
  setSwitch,
  setBrightness,
  setReboot,
  getData
} from '../utils/sendSetting'
import { listDeviceSetting } from '@/api/iot/iotDeviceSettingApi'
import DeviceStrategy from '../DeviceStrategy'
export default {
  name: 'DeviceSetting',
  components: {
    DeviceStrategy
  },
  props: {
    deviceCore: {
      type: String,
      default: null
    },
    port: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      showStrategy: false,
      brightness: 0,
      switchStatus: '0',
      marks: {
        0: '0%',
        10: '10%',
        50: '50%',
        80: {
          style: {
            color: '#1989FA'
          },
          label: this.$createElement('strong', '80%')
        }
      },
      settingList: [],
      deviceStrategy: {}
    }
  },
  watch: {
    deviceCore: {
      deep: true,
      handler(val) {
        this.init()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const that = this
      listDeviceSetting({
        deviceCore: this.deviceCore,
        port: this.port
      }).then(res => {
        const { data, code } = res
        that.setSwitch = false
        that.brightness = 0
        that.deviceStrategy = {
          deviceCore: that.deviceCore,
          port: that.port,
          setStrategy: ''
        }
        if (code === '200') {
          data.forEach(item => {
            switch (item.setting) {
              case 'setSwitch':
                if (item.value === '1') {
                  that.setSwitch = true
                } else {
                  that.setSwitch = false
                }
                break
              case 'setBrightness':
                that.brightness = parseInt(item.value)
                break
              case 'setStrategy':
                that.deviceStrategy = {
                  deviceCore: that.deviceCore,
                  port: that.port,
                  setStrategy: item.value
                }
                break
            }
          })
        }
      })
    },
    openStrategy() {
      this.showStrategy = true
    },
    getData() {
      const that = this
      getData(this, this.deviceCore, this.port, null, function() {
        that.init()
      })
    },
    setSwitch() {
      const that = this
      if (this.switchStatus === 0) {
        this.switchStatus = 1
      } else {
        this.switchStatus = 0
      }
      setSwitch(this, this.deviceCore, this.port, this.switchStatus, function() {
        that.init()
      })
    },
    setBrightness() {
      const that = this
      setBrightness(this, this.deviceCore, this.port, this.brightness, function() {
        that.init()
      })
    },
    setReboot() {
      const that = this
      setReboot(this, this.deviceCore, this.port, null, function() {
        that.init()
      })
    }
  }
}
</script>

<style scoped>

  :root {
    --font-size: 20px;
  }

  .toggle {
    position: absolute;
    width: 5em;
    height: 8em;
    font-size: var(--font-size);
    margin: 0;
    filter: opacity(0);
    cursor: pointer;
    z-index: 2;
  }

  .toggle ~ .switch {
    position: absolute;
    width: 5em;
    height: 8em;
    font-size: var(--font-size);
    background: linear-gradient(#d2d4d6, white);
    border-radius: 1.2em;
    box-shadow: inset 0 -0.2em 0.4em rgba(212, 212, 212, 0.75),
    inset 0 -0.8em 0 0.1em rgba(156, 156, 156, 0.85),
    0 0 0 0.1em rgba(116, 116, 116, 0.8),
    0 0.6em 0.6em rgba(41, 41, 41, 0.3),
    0 0 0 0.4em #d4d7d8;
  }

  .toggle ~ .switch::before,
  .toggle ~ .switch::after {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 1.4em;
    font-family: sans-serif;
  }

  .toggle ~ .switch::before {
    content: '开';
    bottom: 1em;
    color: rgba(0, 0, 0, 0.5);
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.8);
  }

  .toggle ~ .switch::after {
    content: '关';
    top: 0.6em;
    color: rgba(0, 0, 0, 0.45);
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.4);
  }

  .toggle:checked ~ .switch {
    background: linear-gradient(#a1a2a3, #f0f0f0);
    box-shadow: inset 0 0.2em 0.4em rgba(212, 212, 212, 0.75),
    inset 0 0.8em 0 0.1em rgba(255, 255, 255, 0.77),
    0 0 0 0.1em rgba(116, 116, 116, 0.8),
    0 -0.2em 0.2em rgba(41, 41, 41, 0.18),
    0 0 0 0.4em #d4d7d8;
  }

  .toggle:checked ~ .switch::before {
    bottom: 0.3em;
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
  }

  .toggle:checked ~ .switch::after {
    top: 1.2em;
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.15);
  }

  .toggle ~ .light {
    width: 100vw;
    height: 300px;
    background-color: #0a0a16;
    z-index: 1;
    filter: opacity(0.7);
  }

  .toggle:checked ~ .light {
    filter: opacity(0);
  }

</style>
